<template>
  <div class="app-container">
    <!-- 筛选查询区域 -->
    <el-row class="filter-area mb8">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="全部报警" name="all" />
        <el-tab-pane label="未处理报警" name="unhandled" />
      </el-tabs>

      <el-form :inline="true" class="filter-form">
        <el-form-item label="电站名称">
          <el-select v-model="queryParams.station" clearable>
            <el-option
              v-for="item in stationOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="设备名称">
          <el-select v-model="queryParams.device" clearable>
            <el-option
              v-for="item in deviceOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="处理状态">
          <el-select v-model="queryParams.status" clearable>
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="报警等级">
          <el-select v-model="queryParams.level" clearable>
            <el-option
              v-for="item in levelOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="发生时间">
          <el-date-picker
            v-model="timeRange"
            type="daterange"
            range-separator="-"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-row>

    <!-- 数据展示区域 -->
    <el-row :gutter="20">
      <!-- 左侧统计 -->
      <el-col :span="6">
        <el-card class="chart-card">
          <div class="total-alarm">共计报警 {{ total }} 条</div>
          <div ref="chart" class="chart-container" />
        </el-card>
      </el-col>

      <!-- 右侧列表 -->
      <el-col :span="18">
        <el-table :data="alarmList" style="width: 100%">
          <el-table-column prop="station" label="电站名称" width="120" />
          <el-table-column prop="deviceCode" label="设备编码" width="120" />
          <el-table-column prop="deviceName" label="设备名称" width="150" />
          <el-table-column prop="alarmCode" label="报警编码" width="100" />
          <el-table-column prop="description" label="报警描述" min-width="180" />
          <el-table-column prop="level" label="报警等级" width="100">
            <template slot-scope="scope">
              <el-tag :type="levelTagMap[scope.row.level]">
                {{ scope.row.level }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="处理状态" width="100">
            <template slot-scope="scope">
              <el-tag :type="scope.row.status === '已处理' ? 'success' : 'danger'">
                {{ scope.row.status }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="time" label="发生时间" width="160" />
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-button type="text" @click="handleView(scope.row)">查看</el-button>
              <el-button type="text" @click="handleSetLevel(scope.row)">设置等级</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  data() {
    return {
      activeTab: 'all',
      timeRange: [],
      total: 4478,
      queryParams: {
        station: null,
        device: null,
        status: null,
        level: null
      },
      stationOptions: [
        { value: 1, label: '电站1' },
        { value: 2, label: '电站2' }
      ],
      deviceOptions: [
        { value: 1, label: '逆变器#1' },
        { value: 2, label: '逆变器#2' }
      ],
      statusOptions: [
        { value: 'handled', label: '已处理' },
        { value: 'unhandled', label: '未处理' }
      ],
      levelOptions: [
        { value: '事故', label: '事故' },
        { value: '严重', label: '严重' },
        { value: '普通', label: '普通' }
      ],
      levelTagMap: {
        '事故': 'danger',
        '严重': 'warning',
        '普通': 'primary'
      },
      alarmList: [
        {
          station: '电站9',
          deviceCode: '25N1',
          deviceName: '电热站25N1',
          alarmCode: '512',
          description: '硬件故障',
          level: '事故',
          status: '已处理',
          time: '2024-08-20 00:28:06'
        }
        // 更多模拟数据...
      ],
      chartInstance: null
    }
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (this.chartInstance) {
      echarts.dispose(this.chartInstance)
    }
  },
  methods: {
    initChart() {
      this.chartInstance = echarts.init(this.$refs.chart)
      const option = {
        tooltip: { trigger: 'item' },
        series: [{
          type: 'pie',
          radius: ['50%', '70%'],
          data: [
            { value: 44.7, name: '事故', itemStyle: { color: '#f56c6c' } },
            { value: 9.9, name: '严重', itemStyle: { color: '#e6a23c' } },
            { value: 45.4, name: '普通', itemStyle: { color: '#409eff' } }
          ],
          label: { formatter: '{b}: {d}%' }
        }]
      }
      this.chartInstance.setOption(option)
    },
    handleSearch() {
      // 调用接口获取数据
    },
    handleReset() {
      this.queryParams = {
        station: null,
        device: null,
        status: null,
        level: null
      }
      this.timeRange = []
    },
    handleView(row) {
      // 查看详情逻辑
    },
    handleSetLevel(row) {
      // 设置等级逻辑
    }
  }
}
</script>

<style scoped>
.filter-area {
  background: #f5f7fa;
  padding: 20px;
  border-radius: 4px;
}
.chart-card {
  height: 500px;
}
.total-alarm {
  font-size: 18px;
  color: #606266;
  margin-bottom: 20px;
}
.chart-container {
  height: 400px;
}
.filter-form {
  margin-top: 15px;
}
</style>
